/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

/* TODO(issam, FXIOS-10123): switch to nest rules once the min supported version is >= 17.2 */
:root {
  --background-surface: #f9f9fb;
  --background-primary: #ffffff;
  --border-primary: #e0e0e6;
  --text-primary: #15141a;
  --text-secondary: #5b5b66;
}

body.dark {
  --background-surface: #26252c;
  --background-primary: #3a3944;
  --border-primary: #5b5b66;
  --text-primary: #fbfbfe;
  --text-secondary: #cfcfd8;
}

body {
  box-sizing: border-box;
  font: -apple-system-body;
  background-color: var(--background-surface);
  margin: 0;
  padding: 0;
}

form {
  display: grid;
}

label {
  background-color: var(--background-primary);
  border-bottom: 0.5px solid var(--border-primary);
  display: flex;
  flex-direction: column;
  min-height: 68px;
  padding: 11px 16px;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent; /* Remove tap highlight interaction */
}

label input,
label textarea,
label select {
  order: 2;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  background-color: transparent;
  color: var(--text-primary);
  font: -apple-system-body;
}

label textarea {
  overflow: hidden;
  resize: none;
}

label span {
  font: -apple-system-subheadline;
  color: var(--text-secondary);
}
